<script setup lang="ts">
defineOptions({
  name: 'BasicProfile',
})
const { t } = useI18n()
</script>

<template>
  <a-card :bordered="false">
    <a-descriptions :title="t('profile.basic.orderDetailTitle')">
      <a-descriptions-item :label="t('profile.basic.orderNumber')">
        1000000000
      </a-descriptions-item>
      <a-descriptions-item :label="t('profile.basic.orderStatus')">
        {{ t('profile.basic.orderStatusValue') }} <!-- You will need to provide the translation for "已完成" -->
      </a-descriptions-item>
      <a-descriptions-item :label="t('profile.basic.transactionNumber')">
        1234123421
      </a-descriptions-item>
      <a-descriptions-item :label="t('profile.basic.subOrderNumber')">
        3214321432
      </a-descriptions-item>
    </a-descriptions>
    <a-divider style="margin-bottom: 32px" />
    <a-descriptions :title="t('profile.basic.customerInfoTitle')">
      <a-descriptions-item :label="t('profile.basic.customerName')">
        张三
      </a-descriptions-item>
      <a-descriptions-item :label="t('profile.basic.contactNumber')">
        18812345678
      </a-descriptions-item>
      <a-descriptions-item :label="t('profile.basic.deliveryMethod')">
        快速配送
      </a-descriptions-item>
      <a-descriptions-item :label="t('profile.basic.deliveryAddress')">
        北京市朝阳区建国路123号
      </a-descriptions-item>
      <a-descriptions-item :label="t('profile.basic.remarks')">
        无特殊要求
      </a-descriptions-item>
    </a-descriptions>
    <a-divider style="margin-bottom: 32px" />
    <a-descriptions :title="t('profile.basic.productInfoTitle')">
      <a-descriptions-item :label="t('profile.basic.productName')">
        商品A
      </a-descriptions-item>
      <a-descriptions-item :label="t('profile.basic.unitPrice')">
        $50.00
      </a-descriptions-item>
      <a-descriptions-item :label="t('profile.basic.quantity')">
        3
      </a-descriptions-item>
      <a-descriptions-item :label="t('profile.basic.subtotal')">
        $150.00
      </a-descriptions-item>
    </a-descriptions>
    <a-divider style="margin-bottom: 32px" />
    <a-descriptions :title="t('profile.basic.paymentInfoTitle')">
      <a-descriptions-item :label="t('profile.basic.paymentMethod')">
        在线支付
      </a-descriptions-item>
      <a-descriptions-item :label="t('profile.basic.paymentTime')">
        2023-08-18 14:30:00
      </a-descriptions-item>
      <a-descriptions-item :label="t('profile.basic.paymentAmount')">
        $150.00
      </a-descriptions-item>
      <a-descriptions-item :label="t('profile.basic.paymentStatus')">
        已支付
      </a-descriptions-item>
    </a-descriptions>
  </a-card>
</template>

<style lang="less" scoped>
.title {
  color: rgba(0, 0, 0, 0.85);
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 16px;
}
</style>
